<template>
	<view class="container">
		<carHeader :title="'收支明细'"></carHeader>
		<view class="rongqi">
			<view class="tixian">
				<view style="margin-left: 90rpx;font-size: 40rpx;">{{nowMoney}}</view>
				<view style="margin-left: 30rpx;">当前现金余额 (元)</view>
				<view>
					<button class="anniu" @click="tx">
						提现
					</button>
				</view>
			</view>

			<view class="zojie">
				<view class="">
					累计收入 (元) : {{totalIncome}}元
				</view>

				<view class="" style="margin-top: 20rpx;">
					累计提现 (元) : {{totalWithdrawal}}元
				</view>
			</view>
		</view>

		<!-- 详细账单 -->



		<view class="zhangdan">
			<view class="biaoti" style="margin-left: 30rpx;">
				收支明细
			</view>
			<block v-for="(item, index) in items" :key="index">
				<view class="neirong">
					<view class="">
						<view style="font-size: 30rpx;font-weight: 600;">
							{{ item.type }}
						</view>
						<view style="font-size: 25rpx;font-weight: 100;">
							<span v-if="item.amount>=0">
								核销时间:{{ item.createdAt }}
							</span>
							<span v-else>
								提现时间：{{item.createdAt}}
							</span>
						</view>
					</view>
					<view style="color: red;font-size: 30rpx;font-weight: 550;">
						<span v-if="item.amount>=0">
						+{{ item.amount }}
						</span>
						<span v-else>
							{{item.amount}}
						</span>
						
					</view>
				</view>
			</block>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 服务和提现的总列表
				items: [],
				// 服务订单的列表
				orderItems:[],
				// 提现的列表
				tixianItems:[],
				// 商户id
				shopId:1,
				totalWithdrawal: 0,//累计提现
				totalIncome:0,//累计收入
				nowMoney:0,//当前现金余额
			}
		},
		// onReady(){
		// 	this.getOrderInfo();
		// 	this.getTiXianInfo();
		// },
		created() {
			this.getOrderInfo();
			this.getTiXianInfo();
			this.getDetailInfo();
		},
		methods: {
			// 获取订单列表
			getOrderInfo(){
				uni.request({
					url:"http://localhost:8080/shop/dingdan/listById",
					method:'POST',
					data:{
						shopId:this.$global.shopId
					},
					success:(res)=> {
						console.log("订单服务列表：",res.data);
						this.orderItems=res.data.rows;
						this.totalIncome=this.calculateTotalIncome(this.orderItems).toFixed(2);
					},
					fail:(err)=> {
						console.log('获取订单信息失败:', err);
					}
				})
			},
			// 获取提现列表
			getTiXianInfo(){
				uni.request({
					url:"http://localhost:8080/shop/tixian/listById",
					method:'GET',
					data:{
						shopId:this.$global.shopId
					},
					success:(res)=> {
						console.log('提现列表:',res.data);
						this.tixianItems=res.data.rows;
						this.totalWithdrawal=this.calculateTotalWithdrawal(this.tixianItems).toFixed(2);
					},
					fail:(err)=> {
						console.log('获取提现信息失败:', err);
					}
				})
			},
			//获取订单和提现的列表
			getDetailInfo(){
				uni.request({
					url:"http://localhost:8080/shop/transaction/details",
					method:'GET',
					data:{
						shopId:this.$global.shopId
					},
					success:(res)=> {
						console.log(res.data);
						this.items=res.data.rows;
						this.nowMoney=(this.calculateTotalMoney(this.items)).toFixed(2);
						this.items.forEach(item=>{
							item.amount=item.amount.toFixed(2);
						});
						
						console.log(this.nowMoney);
					},
					fail:(err)=> {
						console.log('获取信息失败:', err);
					}
				})
			},
			// 计算累计提现
			calculateTotalWithdrawal(records) {  
			      let total = 0;  
			      records.forEach(record => {  
			        total += record.cashWithdrawal;  
			      });  
			      return total;  
			},  
			// 计算累计收入
			calculateTotalIncome(records) {
			      let total = 0;  
			      records.forEach(record => {  
			        total += record.yuanPrice;  
			      });  
			      return total;  
			},  	
			// 计算当前现金余额
			calculateTotalMoney(records) {
			      let total = 0;  
			      records.forEach(record => {  
			        total += record.amount;  
			      });  
			      return total;  
			},  
			// 页面跳转
			tx() {
				uni.navigateTo({
					url: "/pages/application/application"
				})
			}
		}
	}
</script>

<style>
	.container {
		position: relative;
		/* 添加此行 */
	}

	.rongqi {
		display: flex;
		position: absolute;
		/* 添加此行 */
		top: -2rpx;
		/* 根据需要调整数值 */
		left: 20rpx;
		width: 700rpx;
	}

	.tixian {
		margin-left: 30rpx;
		width: 46%;
		border-right: 2rpx solid yellow;
		margin-top: 100rpx;
		color: azure;
	}

	.anniu {
		width: 270rpx;
		border-radius: 90rpx;
		height: 70rpx;
		background-color: red;
		color: white;
		margin-top: 20rpx;
		margin-left: 10rpx;
		line-height: 180%
	}

	.zojie {
		margin-left: 60rpx;
		margin-top: 150rpx;
		color: white;
	}

	/* 收支明细账单 */
	.zhangdan {
		width: 92%;

		margin-left: 4%;
		background-color: white;
		position: relative;
		/* 添加定位 */
		top: -25rpx;
		border-radius: 30rpx;
	}

	.biaoti {
		height: 90rpx;
		border-bottom: 5rpx solid #d0eeec;
		display: flex;
		align-items: center;
		font-size: 35rpx;
		font-weight: 700;
	}

	.neirong {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 130rpx;
		border-bottom: 3rpx solid #eee;
	}
</style>